<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8">
	<title>Inspectlet sample | Angulartics</title>
	<link rel="stylesheet" href="http://bootswatch.com/cosmo/bootstrap.min.css">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.11/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.11/angular-route.js"></script>
	<script src="../src/angulartics.js"></script>
	<script src="../src/angulartics-inspectlet.js"></script>
	
	<!-- Begin Inspectlet Embed Code -->
	<script type="text/javascript" id="inspectletjs">
		window.__insp = window.__insp || [];
		__insp.push(['wid', ]);
		(function() {
			function __ldinsp(){var insp = document.createElement('script'); insp.type = 'text/javascript'; insp.async = true; insp.id = "inspsync"; insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(insp, x); }
			if (window.attachEvent) window.attachEvent('onload', __ldinsp);
			else window.addEventListener('load', __ldinsp, false);
		})();
	</script>
	<!-- End Inspectlet Embed Code -->


</head>
<body ng-app="sample">

	<div class="navbar navbar-default">
		<div class="navbar-header">
			<a class="navbar-brand" href="#/">My App</a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li><a href="#/a">Page A</a></li>
				<li><a href="#/b">Page B</a></li>
				<li><a href="#/c">Page C</a></li>
			</ul>
		</div>
	</div>

	<div class="container">
		<div ng-view></div>
		<hr>

		<button analytics-on="click" analytics-event="Other"  class="btn btn-default">Button 1</button>

		<!-- same as analytics-on="click", because 'click' is the default -->
		<button analytics-on analytics-event="Download" analytics-category="Commands" class="btn btn-primary">Button 2</button>

		<!-- same as analytics-event="Button 3", because is inferred from innerText -->
		<button analytics-on analytics-category="Commands" class="btn btn-success">Button 3</button>

		<hr>

		<p class="alert alert-success">
			Open the network inspector in your browser, click any of the nav options or buttons above and you'll see the analytics
			request being executed. Then check <a class="alert-link" href="https://www.inspectlet.com/dashboard">your Inspectlet dashboard</a>.
		</p>
	</div>

	<script>
		angular.module('sample', ['ngRoute', 'angulartics', 'angulartics.inspectlet'])
		.config(function ($routeProvider, $analyticsProvider) {
			$routeProvider
			.when('/', { templateUrl: '/samples/partials/root.tpl.html', controller: 'SampleCtrl' })
			.when('/a', { templateUrl: '/samples/partials/a.tpl.html', controller: 'SampleCtrl' })
			.when('/b', { templateUrl: '/samples/partials/b.tpl.html', controller: 'SampleCtrl' })
			.when('/c', { templateUrl: '/samples/partials/c.tpl.html', controller: 'SampleCtrl' })
			.otherwise({ redirectTo: '/' });
		})
		.controller('SampleCtrl', function () {});
	</script>
</body>
</html>
